<%@ page contentType="text/html;charset=utf-8"%>
<html lang="zh">
<head>
<title>个人中心</title>
<link rel="stylesheet" href="css/personal.css">
<link rel="stylesheet" type="text/css" href="css/chat.css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<script>
	$(document).ready(function() {
		 $("#resetsignature").hide();
		 $("#resetnickName").hide();				
				    
            //联系客服
		$("#send").click(function(){
			var content=$("#textarea").val();
			$.ajax({
				type:"post",
				url:"addChat.action",
				data:{content:content},
				success:function(msg){
				}
			});
			$(".chat01_content").append("<div>我:"+content+"</div>");
			$("#textarea").val("");
		});
		
		//结束联系客服
		$(".close_btn").click(function(){
			$.ajax({
				type:"post",
				url:"addChat.action",
				data:{content:"[endchat]"},
				success:function(msg){
					$(".content").hide();
				}
			});
			clearInterval(timer);
		});
	
	   $("#s4").click(function(){
	          $(".content").show();
	          timer=setInterval(getchat,3000);
	   });
            
            
				
				var widget = $('.tabs-vertical');
				var tabs = widget.find('ul a'), content = widget
						.find('.tabs-content-placeholder > div');
				tabs.on('click', function(e) {
					e.preventDefault();
					var index = $(this).data('index');
					tabs.removeClass('tab-active');
					content.removeClass('tab-content-active');
					$(this).addClass('tab-active');
					content.eq(index).addClass('tab-content-active');
				});

				//隐藏显示我的资料
				$("#s1 a,.myinfo").mouseover(function() {
					$(".myinfo").show();
				});
				$(".myinfo").mouseout(function() {
					if($("#resetnickName").is(":hidden")&&$("#resetsignature").is(":hidden")){
					  $(".myinfo").hide();
					}
	
				});
				//点击好友,黑名单刷新iframe
				$("#li02").click(function() {
					$("#iframe02").attr("src", $("#iframe02").attr("src"));
				});
				$("#li03").click(function() {
					$("#iframe03").attr("src", $("#iframe03").attr("src"));
				});
				$("#li04").click(function() {
					$("#iframe04").attr("src", $("#iframe04").attr("src"));
				});
				$("#li05").click(function() {
					$("#iframe05").attr("src", $("#iframe05").attr("src"));
				});
				
				//修改头像
				$("#img01").click(function(){
					$("#img_form").show();
					$("#sub").click(function(){
						var v=$("#subfile").val().substr($("#subfile").val().indexOf(".")+1);
						if($("#subfile").val()!=""){
							if(v=="jpg"){
								$("#img_form").submit();
							}else{
								alert("请选择jpg格式的图片");
							}
						}else{
							alert("请选择上传的图片！");
						}
						
						
					});
				});
				$("#cancel").click(function(){
					$("#img_form").hide();
				});
				
				var index1=0;
				var index2=0;
				//修改个性签名
				
				$("#a6").click(function(){
					if($("#resetnickName").is(":visible")){
						$("#resetnickName").hide();
						index1=0;
						$("#nickName").show();
					}
					if(index1==0){
						$("#signature").hide();
						$("#resetsignature").show().attr("value",$("#signature").html());
						$("#resetsignature").focus().select();
						index1++;
					}else{	
						if(confirm("确认修改？")){
							$("#resetsignature").hide();
							var data=$("#resetsignature").val();
							$("#signature").html(data);
							$("#signature").show();
							$.ajax({
								type:"post",
								url:"signature.action",
								data:{signature:data},
								success:function(msg){
								}
								});
							index1--;
						}else{
							$("#resetsignature").hide();
							$("#signature").show();
							index1=0;
						}
						$(".myinfo").hide();
						
					}
				});
				
				//修改昵称
				
				$("#a5").click(function(){
					if($("#resetsignature").is(":visible")){
						$("#resetsignature").hide();
						$("#signature").show();
						index2=0;
					}
					if(index2==0){
						$("#nickName").hide();
						$("#resetnickName").show().attr("value",$("#nickName").html());
						$("#resetnickName").focus().select();
						index2++;
					}else{
						if(confirm("确认修改？")){
							$("#resetnickName").hide();
							var data=$("#resetnickName").val();
							$("#nickName").html(data);
							$("#nickName").show();
							$.ajax({
								type:"post",
								url:"resetnickName.action",
								data:{nickName:data},
								success:function(msg){
								}
								});
							index2--;
						}else{
							$("#resetnickName").hide();
							$("#nickName").show();
							index2=0;
						}
						$(".myinfo").hide();
					}
					
					
				});
				
				//注销
				$("#quit").click(function(){
					if(confirm("确认注销？")){
						window.location.href="quit.action";
					}
					
				});


			});
			
   	var id=-1;
	var getchat=function(){
		$.ajax({
			type:"post",
			url:"getChat.action",
			data:{userFrom:"s10001"},
			success:function(msg){
				if(msg!="fail"){
					var newId=msg.split("_")[0];
					if(id!=newId){ 
						$(".chat01_content").append("<div>"+msg.split("_")[1]+"客服:"+msg.split("_")[4]+"<div style='float:right;margin-right:20px;'>"+msg.split("_")[3]+"</div></div>");
						id=newId;
					}
				}
				
			}
		});
	};
			
function changeFrameHeight(){
    var ifm= document.getElementById("publish"); 
    ifm.height=document.documentElement.clientHeight+200;
  }
     window.onresize=function(){  
     changeFrameHeight();  
} 
</script>
<style type="text/css">
.myinfo {
	width: 210px;
	height: 135px;
	background-color: #F6F7FB;
	z-index: 10;
	position: absolute;
	left: 40px;
	top: 4px;
	border:2px solid #E3E3E1;
	border-radius:5px;
	display:none;
}

#a5 {

	position: absolute;
	left: 65px;
	top: 10px;
	width:20px;
	height:20px;
}
#a6{
	position: absolute;
	left:10px;
	top: 59px;
	width:20px;
	height:20px;
	
}

#img01 {
	height: 50px;
	width: 60px;
	margin-left:3px;
	margin-top:3px;
}
#nickName,#resetnickName{
	position: absolute;
	font-size:14px;
	width:100px;
	left: 85px;
	top: 12px;}
#signature,#resetsignature{
	position: absolute;
	font-size:14px;
	left: 30px;
	width:150px;
	top: 60px;
	word-wrap:break-word;
	word-break:break-all;
}
input{
	width:60px;
}

#img_form{
	width:385px;
	height:215px;
	border:2px solid #E3E3E1;
	border-radius:5px;
	background-color:#F7F7F7;
	display:none;
}

#subfile{
	margin-top:50px;
	margin-left:25px;
}
#btn{
	margin-top:50px;
	margin-left:200px;
}
#span01{
	margin-left:25px;
}
#quit{
	position: absolute;
	left: 110px;
	top: 16px;
	font-size:11px;
	font-color:black;
}
</style>
</head>
<body>
	<div class="myinfo">
		<div>
			<img id="img01" src="uImg/${user.userId}.jpg">
		</div>
		<img src="img/update02.jpg" id="a5"/><div id='signature'>${user.detailUser.signature}</div><input type="text" id="resetsignature" value=""/>
		<img src="img/update02.jpg" id="a6"/><span id='nickName'>${user.detailUser.nickName}</span><input type="text" id="resetnickName" value=""/>
	</div>
	<div class="jq22-container">
		<header class="h1">
			<div id="d1">
				 <span id="s1"><a href="#">${user.detailUser.nickName}</a></span>
				  <span id="quit"><a href="#">注销</a></span>
				
				 <span id="s3"><a href="home.jsp">首页</a></span>
				 <span id="s4"><a href="#">联系客服</a></span>
			</div>
		</header>
		<header class="h2">
			<div id="d3">我的中心</div>
		</header>
		
		<!-- 联系客服 -->

    <div class="content" style="position:fixed;top:15%;left:30%;margin-top:40%;z-index:1">
        <div class="chatBox" >
            <div class="chatLeft">
                <div class="chat01">
                    <div class="chat01_title">
                        <ul class="talkTo">
                            <li><a href="javascript:;">客服</a></li></ul>
                        <a class="close_btn" href="#"></a>
                    </div>
                    <div class="chat01_content">
                    </div>
                </div>
                <div class="chat02">
                    <div class="chat02_title">
                       
                        <div class="wl_faces_box">
                            <div class="wlf_icon">
                            </div>
                        </div>
                    </div>
                    <div class="chat02_content">
                        <textarea id="textarea"></textarea>
                    </div>
                    <div class="chat02_bar">
                        <ul>
                           
                            <li  id="send" style="right: 5px; top: 5px;"><a href="javascript:;">
                                <img src="img/send_btn.jpg"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div style="clear: both;">
            </div>
        </div>
    </div>
		
		
		<div id="d2">全部功能</div>
		<div class="tabs-vertical">
			<ul>
				<li><a class="tab-active" data-index="0" href="#">我的交易</a></li>
				<li id="li02"><a data-index="1" href="#">我的消息</a></li>
				<li id="li03"><a id="a3" data-index="2" href="#">我的钱包</a></li>
				<li><a data-index="3" href="#">我的发布</a></li>
				<li id="li04"><a id="a4" data-index="4" href="#">我的好友</a></li>
				<li id="li05"><a data-index="5" href="#">黑名单</a></li>
				<li><a data-index="6" href="#">投诉与建议</a></li>
			</ul>
			<div class="tabs-content-placeholder">
				<div class="tab-content-active">
					<p>
						<iframe src="getAll.action" name="baby"></iframe>
					</p>
				</div>
				<div>
					<p>
						<iframe id="iframe02" src="information_prexiaoxi.action"></iframe>
					</p>
				</div>
				<div>
					<p>
						<iframe id="iframe03" src="iframs/personal03.jsp" ></iframe>
					</p>
				</div>
				<div>
					<p>
						<iframe  id=" publish"  src="myGoods.jsp" onload="changeFrameHeight()"></iframe>
					</p>
				</div>
				<div>
					<p>
						<iframe id="iframe04" src="iframs/personal04.jsp"></iframe>
					</p>
				</div>
				<div>
					<p>
						<iframe id="iframe05" src="blackList.action?userId=${user.userId}"></iframe>
					</p>
				</div>
				<div>
					<p>
						<iframe src="complaint_precomplaint.action" name="tousu"></iframe>					</p>
				</div>
			</div>
		</div>
	</div>
	<div id="resetImg">
		<form id="img_form" action="submitImg.action" method="post"  enctype="multipart/form-data" style="position:absolute;left:500px;top:250px;">
				<a href="#" id="cancel" style="float:right;margin-right:5px;">X</a>
			   	<span id="span01">请选择jpg格式的图片：</span><input id="subfile" type="file" name="myimg"/><br/>
			   	<div id="btn">
			   		<input id="sub" type="button" value="上传"/>
			     </div> 
		</form>
	</div>
</body>